<template>
  <div class="login">
    <!-- 页头 -->
    <div class="login_title">
      <h4>{{ name }}</h4>
    </div>
    <!-- 轮播图 -->
    <div id="banner">
      <el-carousel class="carousel">
        <el-carousel-item v-for="(item, index) in bannerList" :key="index"
          ><!--循环轮播图页数-->
          <img :src="item.imges" /><!--循环图片数量-->
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 主要内容 -->
    <div class="login_bg">
      <div class="login_cn">
        <div class="login_right">
          <el-tabs v-model="login_Active" class="tab">
            <el-tab-pane label="机构登录" name="first">
              <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="" prop="username">
                  <!-- <span>用户名：</span> -->
                  <img src="../assets/login_user.png" alt="" />
                  <el-input type="text" v-model="ruleForm.username" autocomplete="off" placeholder="用户名"></el-input>
                  <!-- <i class="el-icon-user"></i> -->
                </el-form-item>
                <el-form-item label="" prop="pass">
                  <!-- <span style="letter-spacing: 5px;">密 码：</span> -->
                  <img src="../assets/login_password.png" alt="" />
                  <el-input
                    type="password"
                    v-model="ruleForm.pass"
                    autocomplete="off"
                    placeholder="密码"
                    @keyup.enter.native="submitForm('ruleForm')"
                  ></el-input>
                  <!-- <i class="el-icon-lock"></i> -->
                </el-form-item>
                <el-form-item label="" prop="">
                  <el-checkbox v-model="checked" class="mima">记住密码</el-checkbox>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <!-- 页脚 -->
    <div class="footer_bg">
      <el-footer></el-footer>
    </div>
  </div>
</template>

<script>
import elFooter from '@/components/footer'
import { getName, getImgPc, login, newclass } from '@/utils/index.js'
export default {
  data() {
    return {
      bacImage: [require('../assets/back4.jpg'), require('../assets/back5.jpg'), require('../assets/back6.jpg')],
      login_Active: 'first',
      checked: false,
      ruleForm: {
        username: '',
        pass: '',
      },
      rules: {},
      ctypeTwo: '',
      type: '',
      ctype: '',
      twoList: [],
      lists: [],
      num: '0',
      picNum: '0',
      // 标题名字
      name: '',
      // 轮播图
      bannerList: [],
    }
  },
  created() {
    // setInterval(()=>{
    //   if(this.picNum>=2){
    //     this.picNum='0'
    //   }else{
    //     this.picNum++
    //   }
    // },5000)
    // 获取标题名字
    getName().then((res) => {
      this.name = res.data.name
    })
    getImgPc().then((res) => {
      this.bannerList = res.data
      console.log(this.bannerList)
    })
  },
  components: {
    elFooter,
  },
  mounted() {
    this.getCookie()
  },
  methods: {
    ctypeNoe(val) {
      console.log(val)
      this.ctypeTwo = val
    },
    // tab切换
    handleClick(tab) {
      this.num = 0
      console.log(tab.index)
      console.log(tab.$el.attributes[5].value)
      newclass().then((res) => {
        // this.$refs.ellist[0].sonFun(res.data[tab.index].child[0].id,res.data[tab.index].id);
        this.type = res.data[tab.index].id
        this.ctype = res.data[tab.index].child[0].id
      })
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          login({
            username: this.ruleForm.username,
            password: this.ruleForm.pass,
          }).then((res) => {
            console.log(res)
            if (res.code == '0') {
              this.$message.closeAll()
              this.$message.success(res.msg)
              //判断复选框是否被勾选 勾选则调用配置cookie方法
              if (this.checked == true) {
                console.log('checked == true')
                //传入账号名，密码，和保存天数3个参数
                this.setCookie(this.ruleForm.username, this.ruleForm.pass, 7)
              } else {
                console.log('清空Cookie')
                //清空Cookie
                this.clearCookie()
              }
              setTimeout(() => {
                this.$router.push('/index')
              }, 700)
            } else {
              this.$message.closeAll()
              this.$message.warning(res.msg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      console.log(c_name)
      var exdate = new Date() //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) //保存的天数
      //字符串拼接cookie
      window.document.cookie = 'userName' + '=' + c_name + ';expires=' + exdate.toUTCString()
      window.document.cookie = 'userPwd' + '=' + c_pwd + ';expires=' + exdate.toUTCString()
    },
    //读取cookie
    getCookie: function () {
      console.log(document.cookie)
      if (document.cookie.length > 0) {
        var arr = document.cookie.split('; ') //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split('=') //再次切割
          //判断查找相对应的值
          if (arr2[0] == 'userName') {
            this.ruleForm.username = arr2[1] //保存到保存数据的地方
            this.checked = true
          } else if (arr2[0] == 'userPwd') {
            this.ruleForm.pass = arr2[1]
          } else {
            this.checked = false
          }
        }
      }
    },
    //清除cookie
    clearCookie: function () {
      this.setCookie('', '', -1) //修改2值都为空，天数为负1天就好了
    },
  },
}
</script>

<style lang="scss" scoped>
.active {
  background-color: #22598f;
  color: white;
  object-fit: contain;
}
.login {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 1.5s;
}
.login_title {
  font-size: 50px;
  line-height: 120px;
  text-align: center;
}
#banner {
  position: fixed;
  top: 120px;
  left: 0;
  right: 0;
  bottom: 100px;
  z-index: 1;
}
.carousel::v-deep .el-carousel__container {
  height: calc(100vh - 180px);
}
#banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.login_bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1520px;
  margin: 0 auto;
  z-index: 2;
}
.login_left {
  display: inline-block;
  width: 500px;
  vertical-align: top;
  margin-top: 50px;
  color: white;
}
.login_left p {
  line-height: 30px;
  text-indent: 24px;
  font-size: 16px;
}
.login_left p:nth-child(2n) {
  text-indent: 35px;
}
.login_right {
  display: inline-block;
  width: 300px;
  float: right;
  background: #e9e9f3;
  padding: 25px;
  // border-radius: 10px;
}
.tab::v-deep {
  // color: white;
  .el-tabs__nav-wrap::after {
    background: none;
  }
  .el-checkbox__label {
    // color: white !important;
  }
  .el-input__inner {
    // background: rgba(255, 255, 255 , 0.2);
    background-color: white;
    // color: white;
    border: 0;
    border-radius: none;
  }
  .el-tabs__item.is-active {
    color: black;
  }
  .el-tabs__active-bar {
    background-color: black;
  }
  .el-tabs__header {
    // margin-bottom: 22px;
  }
  .is-top {
    // padding: 0 7px;
  }
  // div#tab-first {
  //   padding: 0 7px;
  // }
  .el-tabs__item {
    padding: 0 20px;
    font-size: 18px;
  }
}
.demo-ruleForm::v-deep {
  margin-top: 30px;
  width: 100%;
  .el-form-item {
    margin-bottom: 25px;
  }
  .el-form-item__content {
    margin-left: 0 !important;
    position: relative;
  }
  .el-form-item__content img {
    width: 40px;
    height: 40px;
  }
  // .el-form-item__content i{
  //   font-size: 18px;
  //   position: absolute;
  //   top: 10px;
  //   left: 10px;
  // }
  .el-input {
    // width: 70%;
  }
  // .el-input .el-input-group__prepend {
  //   height: 40px;
  //   padding: 0;
  //   border: none;
  // }
  // .el-input .el-input-group__prepend img {
  //   height: 40px;
  // }
  .el-input input {
    padding-left: 50px;
    // border-radius: 25px;
  }
  .mima {
    // margin-left: 75px;
    span {
      width: 15px !important;
    }
  }
  .el-form-item__content {
    span {
      display: inline-block;
      width: 71px;
    }
    img {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
    }
  }
  .el-checkbox__label {
    color: #a5a5a7;
  }
  .el-form-item:nth-child(3) {
    margin-top: -10px;
    margin-left: 7px;
  }
  button {
    display: block;
    width: 80%;
    margin: auto;
    border: none;
    // border-radius: 25px;
    // background: linear-gradient(to right,#6097d7,#4bb8cf);
    font-size: 18px;
    color: white;
    background: #f53705;
  }
  .el-input__suffix {
    display: none;
  }
}
.list_tab {
}
.list_tab ul {
  margin-left: 10px;
}
.list_tab ul li {
  display: inline-block;
  padding: 3px 17px;
  border-radius: 20px;
  font-size: 14px;
}
.list_tab ul li:hover {
  cursor: pointer;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.login_right::v-deep {
  .el-tabs__nav-wrap {
    padding-left: 0px;
  }
  .el-tabs__item.is-active {
    font-size: 24px;
  }
}
.footer_bg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  // line-height: 60px;
}
</style>